<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .container {
            width: 850px;
            margin: 100px auto 0;
            padding: 20px;
            background: #eee;
        }
        
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        
        .cell {
            text-align: center;
            height: 40px;
            width: 90px;
            color: white;
            background: blue;
            border: 1px solid #FFFFFF;
            line-height: 40px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            float: left;
        }
        
        .cell:hover {
            transform: scale(1.2);
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script type="text/javascript">
        onload = function() {
            var container = document.getElementsByClassName('container')[0];
            console.log(container);
            for (var i = 1; i <= 9; i++) {
                var row = document.createElement('div');
                row.className = 'row clearfix';
                for (var j = 1; j <= i; j++) {
                    var cell = document.createElement('div');
                    cell.className = 'cell';
                    // 通过字符串模板生成内容
                    cell.innerText = `${i}×${j}=?`
                        //生成自定义属性
                    cell.dataset.value = i * j;
                    cell.dataset.exp = `${i}×${j}=?`
                    row.append(cell)
                };
                container.append(row);


            }
            var cell = document.querySelector('.cell');
            var cells = document.querySelectorAll('.cell');

            cells.forEach(function(el) {
                el.addEventListener('click', function() {
                    console.log(el.dataset.value)

                    var text = el.innerText;
                    //判断格子里面的内容是否是一个字符串形式的数字
                    if (parseInt(text) == text) {
                        el.innerText = el.dataset.exp
                    } else {
                        el.innerText = el.dataset.value
                    }
                })
            })

        }
    </script>
</body>

</html>